<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>07_事件处理</title>
  </head>
  <body>
    <!--
1. 绑定监听:
  v-on:xxx="fun"
  @xxx="fun"
  @xxx="fun(参数)"
  默认事件形参: event
  隐含属性对象: $event
2. 事件修饰符:
  .prevent : 阻止事件的默认行为 event.preventDefault()
  .stop : 停止事件冒泡 event.stopPropagation()
3. 按键修饰符
  .keycode : 操作的是某个keycode值的健
  .enter : 操作的是enter键
-->

    <div id="example">
      <h2>1. 绑定监听</h2>
      <button @click="handleClick1">按钮1</button>
      <button @click="handleClick2(100,200,300)">按钮2</button>
      <button @click="handleClick3(100,200,300,$event)">按钮3</button>

      <p>{{count}}</p>
      <button @click="count++">count++</button>
      <h2>2. 事件修饰符</h2>
      <a href="http://www.lihanxin.top" @click.prevent>李汉鑫的网站</a>
      <div
        style="width: 500px; height: 200px; background-color: skyblue"
        @click="handleClick4"
      >
        <div @click.stop>nice啊</div>
      </div>
      <h2>3. 按键修饰符</h2>
      <!-- <input type="text" @keyup.13="handleKeyUp"> -->
      <input type="text" @keyup.enter="handleKeyUp" />
    </div>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: '#example',
        data: {
          count: 0,
        },
        methods: {
          handleClick1(e) {
            console.log(e)
          },
          handleClick2(...args) {
            console.log(args)
          },
          handleClick3(...args) {
            console.log(args)
            console.log(args[-1])
          },
          handleKeyUp() {
            console.log('enter')
          },
          handleClick4() {
            console.log('牛啊牛啊')
          },
        },
      })
    </script>
  </body>
</html>
